<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>360 Image Browser</title>
    <meta name="description" content="360 Image Browser - A-Frame">
    <script src="../../../dist/aframe.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <img id="city" src="img/city.jpg">
        <img id="city-thumb" src="img/thumb-city.png">
        <img id="cubes" src="img/cubes.jpg">
        <img id="cubes-thumb" src="img/thumb-cubes.png">
        <img id="sechelt" src="img/sechelt.jpg">
        <img id="sechelt-thumb" src="img/thumb-sechelt.png">

        <a-mixin id="link" geometry="primitive: plane; width: 1.0; height: 1.0">
        </a-mixin>
        <a-mixin id="link-hovered" geometry="primitive: plane; width: 1.2; height: 1.2">
        </a-mixin>
        <!-- Sound from http://www.freesound.org/people/NenadSimic/sounds/171697/ -->
        <a-mixin id="link-selected" geometry="primitive: plane; width: 1.4; height: 1.4"
                 sound="src: click.ogg">
        </a-mixin>
        <a-mixin id="cursor-hovering" material="color: springgreen"></a-mixin>
        <a-mixin id="click-animation" begin="cursor-click" easing="ease-in" attribute="scale"
                 fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
        <a-mixin id="fuse-animation" begin="cursor-fusing" easing="ease-in" attribute="scale"
                 fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-mixin>
      </a-assets>

      <!-- Camera + Cursor. -->
      <a-entity camera look-controls>
        <a-cursor>
          <a-animation mixin="click-animation"></a-animation>
          <a-animation mixin="fuse-animation"></a-animation>
        </a-cursor>
      </a-entity>

      <!-- Pano. -->
      <a-entity id="holder" geometry="primitive: sphere; radius: 10;"
                material="shader: flat" scale="1 1 -1"></a-entity>

      <!-- Pano links. -->
      <a-entity id="links" position="-1.5 -1 -4"></a-entity>
    </a-scene>

    <script>
      (function () {
        // Data for our panos
        var panos = [
          {
            'title': 'Cubes',
            'thumb': '#cubes-thumb',
            'url': '#cubes'
          },
          {
            'title': 'City',
            'thumb': '#city-thumb',
            'url': '#city'
          },
          {
            'title': 'Sechelt',
            'thumb': '#sechelt-thumb',
            'url': '#sechelt'
          }
        ];

        var links = document.querySelector('#links');
        var scene = document.querySelector('a-scene');
        var holder = document.querySelector('#holder');
        var width = 1.0;
        var height = 1.0;
        var selectedLinkEl;

        // Create a link for each item in panos[]
        panos.forEach(function (pano, idx) {
          // Arrange the links horizontally without any overlaps
          var xPos = idx * width * 1.5;

          var el = document.createElement('a-entity');
          el.dataset.id = idx;
          el.setAttribute('position', {x: xPos, y: 0, z: 0});
          el.setAttribute('mixin', 'link');
          el.setAttribute('material', {shader: 'flat', src: pano.thumb});
          panos[idx].el = el;

          // When a link is clicked, change the displayed pano by changing the
          // material attribute of the holder element
          el.addEventListener('cursor-click', handleClick);

          // Add the link to the links element
          links.appendChild(el);

        });

        if (scene.hasLoaded) {
          selectPano(1);
        } else {
          scene.addEventListener('loaded', function () { selectPano (1); });
        }

        function handleClick (evt) {
          var index = evt.currentTarget.dataset.id;
          selectPano(index);
        }

        function selectPano(index) {
          var pano = panos[index];
          var linkEL = pano.el;
          if (selectedLinkEl === pano.el) { return; }
          if (selectedLinkEl) { selectedLinkEl.removeState('link-selected'); }
          holder.setAttribute('material', {
            shader: 'flat',
            src: pano.url
          });
          selectedLinkEl = linkEL;
          selectedLinkEl.addState('link-selected');
        }
      })();
    </script>
  </body>
</html>
